<template>
    <div class="budget-bar-chart" ref="barChartBox"></div>
</template>

<script setup lang="ts">
import { ref,onMounted,watch, PropType } from 'vue';
import * as echarts from 'echarts'
import { BarChartData } from '@/types/config';
const props = defineProps({
    barChartData:{
        required:true,
        type:Object as PropType<BarChartData>
    },
    budgetType:{
        required:true,
        type:Number
    }
})

let barChartBox = ref<HTMLElement>()
let barChart = ref<echarts.ECharts | null>(null)

const barChartOptions = {
    title: {
        text: '总览',
        left: ' 40 %'
    },
    xAxis: {
        type: 'category',
        data: props.barChartData.date
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: props.barChartData.amount,
            type: 'bar'
        }
    ],
    emphasis:{
        label: {
            show: true,
            position: 'top',
            formatter: '{c}' // 使用 {c} 表示系列中的数据值
        }
    }
}

watch([() => props.barChartData.date, () => props.barChartData.amount], () => {
    barChartOptions.xAxis.data = props.barChartData.date
    barChartOptions.series[0].data = props.barChartData.amount
    if (barChart.value)
        barChart.value.setOption(barChartOptions)
})

onMounted(()=>{
    barChart.value = echarts.init(barChartBox.value)
    barChartOptions.title.text = props.budgetType?'支出总览':'收入总览'
    barChart.value.setOption(barChartOptions)
})
</script>

<style scoped>
.budget-bar-chart {
    margin: 20px 20px 0 20px;
    width: 550px;
    height: 320px;
}
</style>